﻿<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="Bookmark" href="favicon.ico" >
	<link rel="Shortcut Icon" href="favicon.ico" />
	<!--[if lt IE 9]>
	<script type="text/javascript" src="lib/html5.js"></script>
	<script type="text/javascript" src="lib/respond.min.js"></script>
	<![endif]-->
	<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.css" />
	<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.9/iconfont.css" />
  <link rel="stylesheet" type="text/css" href="lib/layui/css/layui.css" />
	<link rel="stylesheet" type="text/css" href="static/business/css/style.css" />
	<!--[if IE 6]>
	<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
	<script>DD_belatedPNG.fix('*');</script><![endif]-->
	<!--/meta 作为公共模版分离出去-->

	<title>资讯列表 - 资讯管理 - h-ui.admin.pro v1.0</title>
	<meta name="keywords" content="h-ui.admin.pro v1.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
	<meta name="description" content="h-ui.admin.pro v1.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
	<div class="wap-container">
		<nav class="breadcrumb" style="background-color:#fff;padding: 0 24px">
			首页
			<span class="c-gray en">/</span>
			资讯管理
			<span class="c-gray en">/</span>
			资讯列表
			<a class="btn btn-success radius f-r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
		</nav>
		<article class="Hui-admin-content clearfix">
			<div class="panel">
				<div class="panel-body">
					<div class="row clearfix">
						<div class="col-xs-12 col-sm-6 col-md-4">
							<div class="row clearfix mb-10">
								<span class="col-xs-4 form-item-label">选择分类：</span>
								<span class="col-xs-8 form-item-control">
									<span class="select-box">
										<select id="classifyID" name="" class="select">
											<option value="0">全部分类</option>
											<option value="1">分类一</option>
											<option value="2">分类二</option>
										</select>
									</span>
								</span>
							</div>
						</div>
						<div class="col-xs-12 col-sm-6 col-md-4">
							<div class="row clearfix mb-10">
								<span class="col-xs-4 form-item-label">开始日期：</span>
								<span class="col-xs-8 form-item-control">
									<input type="text" id="search-datetime-start" class="input-text datetimepicker-input">
								</span>
							</div>
						</div>
						<div class="col-xs-12 col-sm-6 col-md-4">
							<div class="row clearfix mb-10">
								<span class="col-xs-4 form-item-label">结束日期：</span>
								<span class="col-xs-8 form-item-control">
									<input type="text" id="search-datetime-end" class="input-text datetimepicker-input">
								</span>
							</div>
						</div>
						<div class="col-xs-12 col-sm-6 col-md-4">
							<div class="row clearfix mb-10">
								<span class="col-xs-4 form-item-label">标题名称：</span>
								<span class="col-xs-8 form-item-control">
									<input type="text" name="searchInput" id="search-input" placeholder=" 资讯名称" class="input-text" />
								</span>
							</div>
						</div>
						<div class="col-xs-12 col-sm-6 col-md-4">
							<div class="row clearfix">
								<span class="col-xs-4 form-item-control">
									<button name="" id="search-submit" class="btn btn-success radius" type="submit"><i class="Hui-iconfont">&#xe665;</i> 搜资讯</button>
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="panel mt-20">
				<div class="panel-body">
					<div class="clearfix">
						<span class="f-l">
							<button class="btn btn-primary radius" onclick="article_add('添加资讯','article-add.html')" ><i class="Hui-iconfont">&#xe600;</i> 添加资讯</button>

							<button onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</button>
              
						</span>
						<span class="f-r">共有数据：<strong>54</strong> 条</span>
					</div>
					<div class="mt-20 clearfix">
						<table id="data-table-list" class="table table-border table-bordered table-bg table-hover table-sort">
							<thead>
								<tr class="text-c">
									<th width="25"><input class="checkbox checkbox-all" type="checkbox" name="" value="all"></th>
									<th width="80">ID</th>
									<th>标题</th>
									<th width="80">分类</th>
									<th width="80">来源</th>
									<th width="120">更新时间</th>
									<th width="75">浏览次数</th>
									<th width="60">发布状态</th>
									<th width="120">操作</th>
								</tr>
							</thead>
							<tbody class="getData-list" data-currPage='1'>
								<tr class="text-c">
									<td><input class="checkbox" type="checkbox" value="10001" name=""></td>
									<td>10001</td>
									<td class="text-l"><u style="cursor:pointer" class="text-primary" onClick="article_edit('查看','article-add.html','10001')" title="查看">资讯标题</u></td>
									<td>行业动态</td>
									<td>H-ui</td>
									<td>2014-6-11 11:11:42</td>
									<td>21212</td>
									<td class="td-status"><span class="label label-success radius">已发布</span></td>
									<td class="f-14 td-manage"><a style="text-decoration:none" onClick="article_stop(this,'10001')" href="javascript:;" title="下架">下架</a>
										<a style="text-decoration:none" class="ml-5" onClick="article_edit('资讯编辑','article-add.html','10001')" href="javascript:;" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a>
										<a style="text-decoration:none" class="ml-5" onClick="article_del(this,'10001')" href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a>
									</td>
								</tr>
								<tr class="text-c">
									<td><input class="checkbox" type="checkbox" value="10002" name=""></td>
									<td>10002</td>
									<td class="text-l"><u style="cursor:pointer" class="text-primary" onClick="article_edit('查看','article-add.html','10002')" title="查看">资讯标题</u></td>
									<td>行业动态</td>
									<td>H-ui</td>
									<td>2014-6-11 11:11:42</td>
									<td>21212</td>
									<td class="td-status"><span class="label label-success radius">草稿</span></td>
									<td class="f-14 td-manage">
										<a style="text-decoration:none" onClick="article_shenhe(this,'10001')" href="javascript:;" title="审核">审核</a>
										<a style="text-decoration:none" class="ml-5" onClick="article_edit('资讯编辑','article-add.html','10001')" href="javascript:;" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a>
										<a style="text-decoration:none" class="ml-5" onClick="article_del(this,'10001')" href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div id="laypage" class="text-c"></div>
				</div>
			</div>
		</article>
	</div>
  <div class="contextMenu" id="Huiadminmenu">
    <ul>
      <li id="closethis">关闭当前 </li>
      <li id="closeother">关闭其他 </li>
      <li id="closeall">关闭全部 </li>
    </ul>
  </div>
	<!--_footer 作为公共模版分离出去-->
	<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="lib/layer/3.1.1/layer.js"></script>
	<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script>
  <script type="text/javascript" src="lib/jquery.contextmenu/jquery.contextmenu.r2.js"></script>
  <script type="text/javascript" src="static/h-ui.admin.pro.iframe/js/h-ui.admin.pro.iframe.js"></script>
	<!--/_footer /作为公共模版分离出去-->

	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript" src="lib/datatables/1.10.15/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
	<script type="text/javascript" src="static/business/js/main.js"></script>
	<!--/请在上方写此页面业务相关的脚本-->
	<script type="text/javascript">
		/* =====所有的列表页都可照搬这套模式====== */
		// 获取URL参数，初始化条件
		function getUrlParameter(){
			// parseQueryString() 方法 在main.js中 提取URL参数为对象
			var urlObj = parseQueryString(window.location.href);
			// console.log(urlObj);

			$("#classifyID").val(urlObj.classifyID);
			$(".getData-list").attr("data-currPage",urlObj.currPage)
			$("#search-datetime-start").val(urlObj.datetimeStart);
			$("#search-datetime-end").val(urlObj.datatimeEnd);
			$("#search-input").val(urlObj.keywords);
		}
		// 封装一个获取数据列表的方法，将条件封装到options对象中
		function getDataList(options){
			console.log(options);
			$.ajax({
				url: 'article-list.html',// 跳转到 action, 换成自己的接口
				data: options,
				type: 'get',
				cache: false,
				dataType: 'json', // 不一定非要json，可以是html，后台封好结构后，直接扔前台
				success: function(respData) {
					/* 大概的数据结构
						respData: {
							result: ture, // 返回状态
							msg: '',		// 返回信息
							pagination: { // 翻页数据
								currPage: 1,// 当前第几页
								total: 100, //数据总数
								pageSize: 10,  // 每页条数
							},
							datas: [    // 详细数据
								{
									id: '',  // id
									title: '', // 标题
									classify: [  // 分类 允许属于多个分类
										{
											id: '',				// 分类id
											name: '',     // 分类名称
										},
										……
									],
									source: { // 来源
										id: '', // 来源id
										name: '', // 来源名称
									},
									updateTime: '', // 更新时间
									viewsNo: '', // 浏览次数
									status: {  // 各种状态
										examine: '',  // 审核状态
										manage: {     // 管理状态
											canPublish: 0, // 能否发布
											canEdit: 0,  // 能否编辑
											canDel: 0,   // 能否删除
										}
									}
								},
								……
							],
						}
					*/
					if(respData.result){ // 请求正确 返回true, 也指200状态
						var data = respData.datas; // 返回的数据
						var htmlstr = '';
						if(data.length > 0 ) {
							// 只有获取的数据对象长度大于0，我们才做for循环处理。
							for(var i = 0;i< data.length;i++){ // for循环将json数据拼接成html结构。 此处可以用模板引擎。
								htmlstr +=
								'<tr>'+
									'<td><input type="checkbox" value="" name=""></td>'+
									'<td>'+ data[i].id +'</td>'+
									'<td class="text-l"><u style="cursor:pointer" class="text-primary" onClick="article_edit(\'查看\',\'article-zhang.html\',\'+data[i].id+\')" title="查看">'+ data[i].title +'</u></td>'+
									'<td data-id="'+data[i].classify.id+'">'+ data[i].classify.name +'</td>'+
									'<td data-id="'+data[i].source.id+'">'+data[i].source.name+'</td>'+
									'<td>'+data[i].updateTime+'</td>'+
									'<td>'+data[i].viewsNo+'</td>';
									// data[i].status.examine 审核状态(字符串) '0'为草稿，'1'为审核中，'2'通过，'3'为未通过，'4'为发布，'5'为下架
									if(data[i].status.examine == '0'){
										htmlstr += '<td class="td-status"><span class="label label-default radius">草稿</span></td>';
									}
									if(data[i].status.examine == '1'){
										htmlstr += '<td class="td-status"><span class="label label-primary radius">审核中</span></td>';
									}
									if(data[i].status.examine == '2'){
										htmlstr += '<td class="td-status"><span class="label label-primary radius">通过，待发布</span></td>';
									}
									if(data[i].status.examine == '3'){
										htmlstr += '<td class="td-status"><span class="label label-danger radius">未通过</span></td>';
									}
									if(data[i].status.examine == '4'){
										htmlstr += '<td class="td-status"><span class="label label-success radius">已发布</span></td>';
									}
									if(data[i].status.examine == '5'){
										htmlstr += '<td class="td-status"><span class="label label-danger radius">已下架</span></td>';
									}

									htmlstr += '<td class="f-14 td-manage">';
									// data[i].status.manage 管理状态集合（子对象为布尔值）  canPublish 能否发布  canEdit 能否编辑 canDel能否删除
										if(data[i].status.examine == '4' && data[i].status.manage.canPublish){
											htmlstr += '<a style="text-decoration:none" onClick="article_stop(this,\'+ data[i].id +\')" href="javascript:;" title="下架">下架</a>';
										}
										if((data[i].status.examine == '2' || data[i].status.examine == '5') && data[i].status.manage.canPublish){
											htmlstr += '<a style="text-decoration:none" onClick="article_start(this,\'+ data[i].id +\')" href="javascript:;" title="发布">发布</a>';
										}
										if(data[i].status.manage.canEdit){
											htmlstr += '<a style="text-decoration:none" class="ml-5" onClick="article_edit(\'资讯编辑\',\'article-add.html\',\'+ data[i].id +\')" href="javascript:;" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a>';
										}
										if(data[i].status.manage.canDel){
											htmlstr += '<a style="text-decoration:none" class="ml-5" onClick="article_del(this,\'+ data[i].id +\')" href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a>';
										}
									htmlstr += '</td>'+
								'</tr>';
							}
							// 在页面对应<tbody class=".getData-list">标签中输出拼接好的html结构。
							$(".getData-list").html(htmlstr);

							// 渲染分页
							laypage({
						    cont: 'laypage',    //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：&lt;div id="laypage">&lt;/div>
						    pages: Math.ceil(respData.pagination.total/respData.pagination.pageSize),  // 除法运算，向上取整
						    curr: currPage,    //初始化当前页
						    hash: 'page',
						    limits: [10, 25, 50, 100],
						    first: '首页',
						    last: '尾页',
						    prev: '<em>&lt;&lt;</em>',
						    next: '<em>&gt;&gt;</em>',
						    jump: function(e, first){ //触发分页后的回调
									console.log(e);
						      if(!first) {
										$(".getData-list").attr("data-currPage", e.curr);
										runGetDataList();
						      }
						    }
						  });
						}else {
							console.log(respData.msg); // 返回正确状态，但是没有数据，在此处处理。
							var tdNum = $("#data-table-list thead tr td").length;
							htmlstr = '<tr><td colspan="'+tdNum+'" class="data-null">数据为空</td></tr>';
							$(".getData-list").html(htmlstr);
						}
					}else {
						console.log(respData.msg);  // 返回错误状态，通常指网络请求失败、后台报错等，最好后台给出错误提示，方便前台调试。也可定义几种返回的错误状态码，如201 203 400 404 500 503等。
					}
				},
				error: function(respData){ // ajax的error状态
					console.log(respData);
				}
			});
		}

		// 运行获取数据列表这个方法，这里面可以灵活自定义要传递的参数
		function runGetDataList(){
			getDataList({
				classifyID : $("#classifyID").val() || 0, // 分类id
				currPage : $(".getData-list").attr("data-currPage") || 1, // 当前第几页
				pageSize: 10, // 每页几条
				datetimeStart : $("#search-datetime-start").val() || '',
				datatimeEnd : $("#search-datetime-end").val() || '',
				keywords : $("#search-input").val() || '',
			});
		}

		$(function(){
			runDatetimePicker(); // 实例化日期控件
			getUrlParameter(); // 获取URL参数，初始化条件

			$('.table-sort').dataTable({
				"aaSorting": [[ 1, "desc" ]],//默认第几个排序
				"bStateSave": true,//状态保存
				"paging":false,
				"pagingType": "full_numbers",
				"aoColumnDefs": [
				  //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
				  {"orderable":false,"aTargets":[0,8]}// 不参与排序的列
				]
			});

			// runGetDataList(); // 页面载入，自执行加载数据...
			// 点击搜索执行...
			$("#search-submit").on("click",function(){
				// runGetDataList();
			});

      // 全选 页面调用
      $(".table").HuicheckAll(
        {
          checkboxAll: 'thead input[type="checkbox"]',  // 表头全选的checkbox
          checkbox: 'tbody input[type="checkbox"]' // 列表开头的checkbox
        },
        function(checkedInfo) {
          console.log(checkedInfo);
        }
      )
		});
	</script>
</body>
</html>
